<!DOCTYPE html>
<html>
<head>
	<title>淘宝网 - 淘！我喜欢</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="./css/taobao.css">
	<link rel="icon" type="image/x-icon" href="https://img.alicdn.com/tps/i3/T1OjaVFl4dXXa.JOZB-114-114.png">
</head>
<body>
	<!-- 顶部导航栏 -->
	<div class="page-nav">
		<div class="nav-content">
			<ul class="left">
				<li class="region"><a href="#">中国大陆</a></li>
				<li class="login"><a href="#" style="color: #f40">亲，请登录</a></li>
				<li class="register"><a href="#">免费注册</a></li>
				<li class="download"><a href="#">手机逛淘宝</a></li>
			</ul>
			<ul class="right">
				<li class="site-navigation"><a href="#">网页导航</a></li>
				<li class="contact-cs"><a href="#">联系客服</a></li>
				<li class="seller-center"><a href="#">卖家中心</a></li>
				<li class="goods-category"><a href="#">商品分类</a></li>
				<li class="favorties"><a href="#">收藏夹</a></li>
				<li class="shopping-cart"><a href="#">购物车</a></li>
				<li class="account"><a href="#">我的淘宝</a></li>
			</ul>
		</div>
	</div>
	<!-- 搜索框区域 -->
	<div class="search">
		<div class="search-content">
			<div class="logo-part">
				<div class="logo-content">
					<strong style="color: #f40; font-size: 30px; ">淘宝网</strong>
				</div>
			</div>
			<div class="center-part">
				<div class="search-nav">
					<ul>
						<li class="goods"><a href="#">宝贝</a></li>
						<li class="tmall"><a href="#">天猫</a></li>
						<li class="shop"><a href="#">店铺</a></li>
					</ul>
				</div>
				<div class="search-box">
					<form>
						<input id="query" type="text" name="query" placeholder=" 六花瓣旋转果盘">
						<!-- <input id="submit" type="submit" name="submit" value="搜索"> -->
						<button id="submit" type="button"><a href="#">搜索</a></button>
					</form>
				</div>
				<div class="hot-link">
					<a href="#">新款连衣裙</a>
					<a href="#">四件套</a>
					<a href="#">潮流T恤</a>
					<a href="#">时尚女鞋</a>
					<a href="#">短裤</a>
					<a href="#">半身裙</a>
					<a href="#">男士外套</a>
					<a href="#">墙纸</a>
					<a href="#">行车记录仪</a>
					<a href="#">新款男鞋</a>
					<a href="#">耳机</a>
					<a href="">时尚女包</a>
					<a href="#">沙发</a>
				</div>
			</div>
			<div class="qr-code-part">
				<div class="close-btn"><a class="x" href="#">x</a></div>
				<div class="qr-code">
					<div class="code-title">手机淘宝</div>
					<img src="./images/download_qr_code.jpg">
				</div>
			</div>
		</div>
	</div>
	<!-- 屏幕中间部分 -->
	<div class="page-body">
		<div class="top-nav">
			<ul class="top-nav1">
				<li><span>主题市场</span></li>
			</ul>
			<ul class="top-nav2">
				<li class="tmall"><a href="#">天猫</a></li>
				<li class="juhuasuan"><a href="#">聚划算</a></li>
				<li class="tmall-market"><a href="#">天猫超市</a></li>
			</ul>
			<span class="sep">|</span>
			<ul class="top-nav3">
				<li><a href="#">淘抢购</a></li>
				<li><a href="#">电器城</a></li>
				<li><a href="#">司法拍卖</a></li>
				<li><a href="#">淘宝心选</a></li>
				<li><a href="#">兴农扶贫</a></li>
			</ul>
			<span class="sep">|</span>
			<ul class="top-nav4">
				<li><a href="#">飞猪旅行</a></li>
				<li><a href="#">智能生活</a></li>
				<li><a href="#">苏宁易购</a></li>
			</ul>
		</div>
		<div class="left-nav">
			<ul>
				<li><a href="#">女装</a>/<a href="#">男装</a>/<a href="">内衣</a><span>&gt</span></li>
				<li><a href="#">鞋靴</a>/<a href="#">箱包</a>/<a href="">配件</a><span>&gt</span></li>
				<li><a href="#">童装玩具</a>/<a href="#">孕产</a>/<a href="">用品</a><span>&gt</span></li>
				<li><a href="#">家电</a>/<a href="#">数码</a>/<a href="">手机</a><span>&gt</span></li>
				<li><a href="#">美妆</a>/<a href="#">洗护</a>/<a href="">保健品</a><span>&gt</span></li>
				<li><a href="#">珠宝</a>/<a href="#">眼镜</a>/<a href="">手表</a><span>&gt</span></li>
				<li><a href="#">女装</a>/<a href="#">男装</a>/<a href="">内衣</a><span>&gt</span></li>
				<li><a href="#">鞋靴</a>/<a href="#">箱包</a>/<a href="">配件</a><span>&gt</span></li>
				<li><a href="#">童装玩具</a>/<a href="#">孕产</a>/<a href="">用品</a><span>&gt</span></li>
				<li><a href="#">家电</a>/<a href="#">数码</a>/<a href="">手机</a><span>&gt</span></li>
				<li><a href="#">美妆</a>/<a href="#">洗护</a>/<a href="">保健品</a><span>&gt</span></li>
				<li><a href="#">珠宝</a>/<a href="#">眼镜</a>/<a href="">手表</a><span>&gt</span></li>
				<li><a href="#">女装</a>/<a href="#">男装</a>/<a href="">内衣</a><span>&gt</span></li>
				<li><a href="#">鞋靴</a>/<a href="#">箱包</a>/<a href="">配件</a><span>&gt</span></li>
				<li><a href="#">童装玩具</a>/<a href="#">孕产</a>/<a href="">用品</a><span>&gt</span></li>
				<li><a href="#">家电</a>/<a href="#">数码</a>/<a href="">手机</a><span>&gt</span></li>
			</ul>
		</div>
		<div class="center">
			<div class="left-pic">
				<div class="pic1"><a href="#"><img src="./images/pic1.jpg"></a></div>
				<div class="text1"><span>理想生活上天猫</span></div><hr>
				<div class="pic4-7">
					<a href="#"><img src="./images/pic11.jpg"></img></a><a href="#"><img src="./images/pic8.jpg"></img></a><a href="#"><img src="./images/pic7.jpg"></img></a><a href="#"><img src="./images/pic10.jpg"></img></a>
				</div>
			</div>
			<div class="right-pic">
				<div class="pic2"><a href="#"><img src="./images/pic2.jpg"></a></div>
				<div class="text2"><span>今日热卖</span></div>
				<div class="pic3"><img src="./images/pic3.jpg"></a></div>
			</div>
		</div>
		<div class="right-part">
			<div class="member">
				<img src="./images/icon.jpg"><br><span class="say-hello">Hi!你好</span>
				<ul class="ul1">
					<li class="left">
						<a href="#">领淘金币抵钱</a>
					</li>
					<li class="right">
						<a href="#">会员俱乐部</a>
					</li>
				</ul>
				<div class="assist"></div>
				<ul class="ul2">
					<li><a href="#">登录</a></li>
					<li><a href="#">注册</a></li>
					<li><a href="#">开店</a></li>
				</ul>
			</div>
			<div class="inform"><a href="#">网上有害信息举报专区<span></span></a></div>
			<div class="notice">
				<ul>
					<li><a href="#">公告</a></li>
					<li><a href="#">规则</a></li>
					<li><a href="#">论坛</a></li>
					<li><a href="#">安全</a></li>
					<li><a href="#">公益</a></li>
				</ul>
				<div class="assist"></div>
				<div class="title">
					<a href="#">新增《淘宝网大家电行业管理规范》公示通知</a>
					<a href="#">《淘宝禁售商品管理规范》关于证券咨询类商品规则解读变更公示通知</a>
					<a href="#">新增《淘宝网大家电行业管理规范》公示通知</a>
					<a href="#">《淘宝直播平台管理规则》变更公示通知</a>
				</div>
			</div>
			<div class="conve">
				<ul>
					<li><a href="#" class="left"><img src="icon/telephone_fee.jpg"><span>充话费</span></a></li>
					<li><a href="#"><img src="icon/travel.jpg"><span>旅行</span></a></li>
					<li><a href="#"><img src="icon/insurance.jpg"><span>车险</span></a></li>
					<li><a href="#"><img src="icon/game.jpg"><span>游戏</span></a></li>
					<li><a href="#" class="left"><img src="icon/lottery.jpg"><span>彩票</span></a></li>
					<li><a href="#"><img src="icon/movie.jpg"><span>电影</span></a></li>
					<li><a href="#"><img src="icon/hotel.jpg"><span>酒店</span></a></li>
					<li><a href="#"><img src="icon/money.jpg"><span>理财</span></a></li>
					<li><a href="#" class="left"><img src="icon/service.jpg"><span>找服务</span></a></li>
					<li><a href="#"><img src="icon/show.jpg"><span>演出</span></a></li>
					<li><a href="#"><img src="icon/share_bills.jpg"><span>水电煤</span></a></li>
					<li><a href="#"><img src="icon/ticket.jpg"><span>火车票</span></a></li>
				</ul>
			</div>
		</div>
	</div>
	<!-- 底部部分 -->
	<div class="bottom">
		<div class="toutiao">
			<div class="headline">
				<h2>淘宝头条</h2>
				<p>让你的生活更有趣</p>
			</div>
			<div class="news">
				<a href="#">
				<img src="./images/news_pic.jpg">
				<span class="title">万圣节去哪玩？良阅二次元游园会等你来！</span>
				<span class="content">哈喽，大家好，我是你们的微漫酱！万圣节快要到了，在此推荐给大家一个好玩的二次元线下活动，一起来了解一下把！</span>
				</a>
				<a href="#">
				<span class="more">更多 &gt;</span>
				</a>
		</div>
		<div class="app">
			<span class="title">阿里APP</span>
			<a href="#"><span class="more">更多&gt;</span></a>
			<ul class="icons">
				<li><a href="#"><img src="icon/app_icons/taobao.jpg"></a></li>
				<li><a href="#"><img src="icon/app_icons/tianmao.jpg"></a></li>
				<li><a href="#"><img src="icon/app_icons/juhuasuan.jpg"></a></li>
				<li><a href="#"><img src="icon/app_icons/zhifubao.jpg"></a></li>
				<li><a href="#"><img src="icon/app_icons/wangwang.jpg"></a></li>
				<li><a href="#"><img src="icon/app_icons/gaode.jpg"></a></li>
				<li><a href="#"><img src="icon/app_icons/feizhulvxing.jpg"></a></li>
				<li><a href="#"><img src="icon/app_icons/taopiaopiao.jpg"></a></li>
				<li><a href="#"><img src="icon/app_icons/dingding.jpg"></a></li>
				<li><a href="#"><img src="icon/app_icons/xianyu.jpg"></a></li>
			</ul>
		</div>
	</div>
	
</body>
</html>

